<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="ship">
        <navigation :msg="navMsg"></navigation>
        <div class="nav-top">
          <div class="nav-info">
            <div class="nav-search">
              <el-input class="el-input--mini" placeholder="请输入订单号/出库单号/物流单号/客户"></el-input>
              <span class="icon-test126 icon-right"></span>
            </div>
            <div class="nav-timeP">
              <el-date-picker
                size="mini"
                class="picker-mini"
                v-model="value1"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <span class="icon-test359 icon-right"></span>
              <span style="font-size: 14px">高级搜索</span>
            </div>
          </div>
          <span class="icon-test195">导入物流单</span>
        </div>
        <el-table :height="tableHeight"
                  :data="shipData">
          <el-table-column type="selection"
                           min-width="5%">
          </el-table-column>
          <el-table-column min-width="10%"
                           label="出库单号">
            <template slot-scope="scope">
              <div :title="scope.row.id">
                {{scope.row.id}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="客户" min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.name">{{scope.row.name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单号"
                           min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.orderId">
                {{scope.row.orderId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="10%">
            <template slot="header">
              <span>物流单状态</span>
              <el-tooltip :content="content" placement="bottom" effect="light">
                <span class="icon-test102" style="color: #666;"></span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <div :title="scope.row.carType">
                {{scope.row.carType}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="物流单号" min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.carId">
                {{scope.row.carId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="出库时间" min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.goDate">
                {{scope.row.goDate}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发货时间" min-width="10%">
            <template slot-scope="scope">
              <div :title="scope.row.forDate">
                {{scope.row.forDate}}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <Paging :msg="50" @pageNum="getPageNum" @pageId="getPageId"></Paging>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Paging from '@/components/common/paging/Paging'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      tableHeight: window.innerHeight - 223,
      content: '1、直接在订单详情中修改物流信息；2、物流单导入',
      navMsg: [
        {
          name: '订单',
          path: '/orders'
        }, {
          name: '发货记录',
          path: '/shipManage'
        }
      ],
      searchData: [
        {
          numberingBox: true
        },
        [],
        {
          gaojiseach: true,
          daochu: true
        }
      ],
      ordersData: [
        {

        }
      ],
      shipData: [
        {
          id: 'CK-20190616-0001',
          name: '深圳宝能太古',
          orderId: 'DH201906140002',
          carType: '顺丰快递[12]',
          carId: '12',
          goDate: '2019-06-16',
          forDate: '2019-06-16'
        },
        {
          id: 'CK-20190616-0001',
          name: '深圳宝能太古',
          orderId: 'DH201906140002',
          carType: '顺丰快递[12]',
          carId: '12',
          goDate: '2019-06-16',
          forDate: '2019-06-16'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  },
  created () {
    for (var i = 0; i < this.ordersData.length; i++) {
      if (this.ordersData[i].billStatus === 2) {
        this.auditedData.push(this.ordersData[i])
      }
    }
    // console.log(this.auditedData)
  },
  components: {
    VCommonHeaderLeft,
    Paging,
    navigation
  },
  methods: {
    sliceArray (array, size, id) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result[id]
    },
    getPageId (id = 1) {
      this.pageId = id
      // this.stock = this.sliceArray(this.parentMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      // console.log(num)
      this.pageNum = num
      this.getPageId()
      // console.log(this.stock)
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.tableHeight = window.innerHeight - 223
        that.tableHeight = window.tableHeight
      })()
    }
  }
}
</script>

<style lang="scss">
.ship {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  .nav-top {
    display: flex;
    width: 100%;
    overflow: hidden;
    margin-right: 10px;
    .nav-top{
      display: flex;
      justify-content: space-between;
      height: 60px;
      padding: 0 1rem;
      line-height: 60px;
      background-color: #fff;
      .nav-info {
        display: flex;
        .nav-search {
          input {
            width: 240px;
            height: 30px;
            border: 1px solid rgb(227, 227, 227);
          }

          .icon-right {
            position: relative;
            left: 220px;
            bottom: 60px;
            color: #999;
          }
        }

        .nav-timeP {
          .picker-mini {
            width: 260px;
            height: 30px;
          }

          .icon-right {
            position: relative;
            left: -20px;
            bottom: -3px;
            color: #999;
          }
        }
      }
    }
    .nav-timeP {
      .picker-mini {
        width: 260px;
        height: 30px;
      }
      .icon-right {
        position: relative;
        left: -20px;
        bottom: -3px;
        color: #999;
      }
    }
  }
  /deep/ table {
    thead {
      tr {
        th:first-child {
          line-height: 40px;
          text-align: center;
        }
        th {
          font-size: 12px;
          font-weight: 400;
          padding: 5px 0;
          border-top: 1px #f3f3f3 solid;
          background-color: #fcfcfc;
        }
      }
    }
    tbody {
      tr {
        td {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
